<script setup>
import WelcomeItem from './WelcomeItem.vue'

/**
 * @typedef Document
 * @prop {string} href  文档链接
 * @prop {string} title 链接标题
 */

/**
 * @typedef Extension
 * @prop {string} icon
 * @prop {string} title
 * @prop {string} href
 */

/** @type Document[] */
const documents = [
  {
    title: '📦Vue文档',
    href: 'https://vuejs.org/'
  },
  {
    title: '🌴Icon图标库',
    href: 'https://icones.js.org/'
  },
  {
    title: '🚦Vue Router文档',
    href: 'https://router.vuejs.org/'
  },
  {
    title: '🍱Unocss文档',
    href: 'https://unocss.dev/'
  },
  {
    title: '🍍Pinia文档',
    href: 'https://pinia.vuejs.org/'
  },
  {
    title: '⚡Vite文档'
  }
]

/** @type Extension[] */
const extensions = [
  {
    icon: 'i-logos-visual-studio-code',
    title: 'Vscode',
    href: 'https://code.visualstudio.com/'
  },
  {
    icon: 'i-logos-vue',
    title: 'Volar',
    href: 'https://github.com/johnsoncodehk/volar'
  },
  {
    icon: 'i-logos-eslint',
    title: 'Eslint',
    href: 'https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint'
  },
  {
    icon: 'i-logos-prettier',
    title: 'Prettier',
    href: 'https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode'
  }
]
</script>

<template>
  <WelcomeItem>
    <template #icon><i i-line-md-moon-loop h-6 w-6 /></template>
    <template #heading>文档</template>
    <ul grid="~ cols-2">
      <li v-for="{ href, title } of documents" :key="href">
        <a link :href="href" target="_blank" rel="noopener">{{ title }}</a>
      </li>
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon><i i-line-md-cloud-print-outline-loop h-6 w-6 /></template>
    <template #heading>开发环境</template>
    <ul grid="~ cols-2">
      <li v-for="{ href, title, icon } of extensions" :key="href">
        <a link :href="href" target="_blank" rel="noopener">
          <i :class="icon" />
          {{ title }}
        </a>
      </li>
    </ul>
  </WelcomeItem>
</template>
